<template>
  <div class="hm-my">
    <div class="user">
      <img :src="avatar" alt="" />
      <h3>{{ username }}</h3>
    </div>
    <van-grid clickable :column-num="3" :border="false">
      <van-grid-item icon="clock-o" text="历史记录" to="/" />
      <van-grid-item icon="bookmark-o" text="我的收藏" to="/layout/collect" />
      <van-grid-item icon="thumb-circle-o" text="我的点赞" to="/layout/like" />
    </van-grid>

    <van-cell-group class="mt20">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell @click="logout" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "HmMy",
  data() {
    return {
      username: "",
      avatar:
        "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png",
    };
  },

  methods: {
    logout() {
      console.log("退出");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.hm-my {
  .mt20 {
    margin-top: 20px;
  }
  .user {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
    max-width: 300px;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
    }
    h3 {
      margin: 0;
      font-size: 20px;
      color: #333;
    }
  }
  .van-grid {
    margin-top: 20px;
    .van-grid-item {
      text-align: center;
      font-size: 16px;
      color: #666;
      &.van-grid-item--icon {
        font-size: 24px;
        color: #06c;
      }
    }
  }
  .van-cell-group {
    margin-top: 20px;
    .van-cell {
      padding: 15px;
      border-bottom: 1px solid #ddd;
      text-align: left;
      font-size: 16px;
      color: #333;
      &.van-cell--link {
        color: #06c;
      }
    }
    .van-cell:last-child {
      border-bottom: none;
    }
  }
}
</style>
